<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/links.jsp"%>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            var createSmallGrid = function() {
                var mydata = [
                    {id:"1",invdate:"2007-10-01",name:"test",total:"210.00"},
                    {id:"2",invdate:"2007-10-02",name:"test2",total:"320.00"},
                    {id:"3",invdate:"2007-09-01",name:"test3",total:"430.00"},
                    {id:"4",invdate:"2007-10-04",name:"test4",total:"210.00"},
                    {id:"5",invdate:"2007-10-05",name:"test5",total:"320.00"},
                    {id:"6",invdate:"2007-09-06",name:"test6",total:"430.00"},
                    {id:"7",invdate:"2007-10-04",name:"test7",total:"210.00"},
                    {id:"8",invdate:"2007-10-03",name:"test8",total:"320.00"},
                    {id:"9",invdate:"2007-09-01",name:"test9",total:"430.00"},
                    {id:"10",invdate:"2007-09-08",name:"test10",total:"530.00"},
                    {id:"11",invdate:"2007-09-08",name:"test11",total:"530.00"},
                    {id:"12",invdate:"2007-09-10",name:"test11",total:"530.00"}
                ];
                $("#list").jqGrid({
                    datatype: "local",
                    data: mydata,
                    colNames:['Inv No no NO','Date', 'Client', 'Total in EUR'],
                    colModel:[
                        {name:'id',index:'id', width:65, sorttype: "int", editable:false,editoptions:{readonly:true,size:10}},
                        {name:'invdate',index:'invdate', width:120,editable:true,align:'center',
                         sorttype:'date', formatter:'date', datefmt:'d/m/Y',
                         editoptions:{size:12,dataInit : function (elem) {
                             setTimeout(function(){
                                 $(elem).datepicker({ showOn: 'button' });
                             },100);
                         } }},
                        {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
                        {name:'total',index:'total', width:180,align:"right",editable:true,editoptions:{size:10}}
                    ],
                    rowNum:10,
                    rowList:[10,20,30],
                    pager: '#pager',
                    sortname: 'id',
                    viewrecords: true,
                    altRows:true,
                    sortorder: "desc",
                    caption:"Small Grid",
                    height: "100%"
                });
            };
            var createLargeGrid = function() {
                var mydata = [
                    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                    {id:"4",invdate:"2007-10-04",name:"test4",note:"note4",amount:"200.00",tax:"10.00",total:"210.00"},
                    {id:"5",invdate:"2007-10-05",name:"test5",note:"note5",amount:"300.00",tax:"20.00",total:"320.00"},
                    {id:"6",invdate:"2007-09-06",name:"test6",note:"note6",amount:"400.00",tax:"30.00",total:"430.00"},
                    {id:"7",invdate:"2007-10-04",name:"test7",note:"note7",amount:"200.00",tax:"10.00",total:"210.00"},
                    {id:"8",invdate:"2007-10-03",name:"test8",note:"note8",amount:"300.00",tax:"20.00",total:"320.00"},
                    {id:"9",invdate:"2007-09-01",name:"test9",note:"note9",amount:"400.00",tax:"30.00",total:"430.00"},
                    {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"},
                    {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"},
                    {id:"12",invdate:"2007-09-10",name:"test11",note:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
                ];
                $("#list").jqGrid({
                    datatype: "local",
                    data: mydata,
                    colNames:['Inv No no NO','Date', 'Client', 'Amount in EUR','Tax','Total','Notes'],
                    colModel:[
                        {name:'id',index:'id', width:65, sorttype: "int", editable:false,editoptions:{readonly:true,size:10}},
                        {name:'invdate',index:'invdate', width:120,editable:true,align:'center',
                         sorttype:'date', formatter:'date', datefmt:'d/m/Y',
                         editoptions:{size:12,dataInit : function (elem) {
                             setTimeout(function(){
                                 $(elem).datepicker({ showOn: 'button' });
                             },100);
                         } }},
                        {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
                        {name:'amount',index:'amount', width:70, align:"right",editable:true,editoptions:{size:10}},
                        {name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}},
                        {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
                        {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}
                    ],
                    rowNum:10,
                    rowList:[10,20,30],
                    pager: '#pager',
                    sortname: 'id',
                    viewrecords: true,
                    altRows:true,
                    sortorder: "desc",
                    caption:"Large Grid",
                    height: "100%"
                });
            };

            createSmallGrid();

            $("button#createLarge").click(function() {
                //$("#list").jqGrid('GridDestroy');
                $("#list").jqGrid('GridUnload');
                createLargeGrid();
            });
            $("button#createSmall").click(function() {
                //$("#list").jqGrid('GridDestroy');
                $("#list").jqGrid('GridUnload');
                createSmallGrid();
            });
        });
    //]]>
    </script>
</head>

<body>

<fieldset>
<button id="createLarge" type="button">Create Large Grid</button>
<button id="createSmall" type="button">Create Small Grid</button>
</fieldset>
<table id="list"><tr><td/></tr></table>
<div id="pager"/>

</body>
</html>